
<!-- Loading skeleton shown while frontend is waiting for data from backend -->
<ng-container *ngIf="isLoading;else dataLoaded">

  <div class="row">
    <div class="col-12 mb-4">

      <app-loading-skeleton
        amount="1"
        colClass="col-12"
        blockHeight="616px">
      </app-loading-skeleton>

    </div>
  </div>

</ng-container>

<!-- Parts displayed once system has retrieved data from the backend -->
<ng-template #dataLoaded>

  <ng-container>

    <div class="row mb-1" *ngIf="systemReport && systemReport.has_openai">
      <div class="col-12">

        <app-vibe-coding>
        </app-vibe-coding>

      </div>
    </div>

  </ng-container>

</ng-template>
